<template>
  <div class="click-btn">
    <button
      class="commen-btn"
      @click="handleConfirm(1)"
      :class="{ active: 1 == currentBtn }"
    >
      确定</button
    ><button
      class="commen-btn"
      @click="handleCancel(2)"
      :class="{ active: 2 == currentBtn }"
    >
      取消</button
    ><button
      class="commen-btn"
      @click="handleApply(3)"
      :class="{ active: 3 == currentBtn }"
    >
      应用
    </button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentBtn: 3,
    };
  },
  methods: {
    handleConfirm(index) {
      this.currentBtn = index;
      console.log(index);
    },
    handleCancel(index) {
      this.currentBtn = index;
      console.log(index);
    },
    handleApply(index) {
      this.currentBtn = index;
      console.log(index);
    },
  },
};
</script>
<style scoped>
.click-btn {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  bottom: 140px;
  right: 22px;
}
.other-info {
  margin-top: 10px;
  width: 50%;
  display: flex;
  font-size: 14px;
  justify-content: space-around;
}
.active {
  background-color: #00c3d9;
}
</style>
